<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				评价
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="body">
				<view class="text1">您对本节课程满意吗？</view>
				<view class="message_box">
					<view class="message_left">
						<image src="../../../static/avatar.jpg" mode=""></image>
						<view class="">
							<text class="text2">老师名字</text>
							<text class="teacher_type">跨境助学师</text>
						</view>
					</view>

					<view class="message_right text1">
						英语
					</view>
				</view>
				<view class="grade_box">
					<text class="margin-box">评分</text>
					<uni-rate size="30" value="5" @change="change"></uni-rate>
					<text class="grade_num">{{grade}}.0</text>
				</view>
				<textarea class="text_box" v-model="evaluateText" placeholder="对老师的评价" />
				<view class="btn" @tap="setEvaluate">
					确认
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components: {
			uniRate,
			uniIcon
		},
		data() {
			return {
				grade:5,//分数
				evaluateText:'',//评价
			}
		},
		methods: {
			change(res){
				// console.log(res)
				this.grade=res.value;
			},
			setEvaluate(){
				var me=this;
				var data={
					appointment_id:'111',//课程id
					content:this.evaluateText,//评论内容
					user_id:uni.getStorageSync('user_id'),
					score:this.grade,
					parent_id:0,
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'masterComment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
					}
				})
			},
		}
	}
</script>

<style scoped>
.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 106upx;
	}
	.padding-box{
		padding-top: 148upx;

	}
	.body{
		background: #FFFFFF;
		width: 100%;
		padding: 28upx 24upx;
		box-sizing: border-box;

	}
	.text1{
		font-size:32upx;
		color: #333333;
		margin-bottom: 28upx;
	}
	.message_box{
		background:#F5F5F5;
		height: 98upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		padding: 0 24upx;
		border-radius: 10upx;
	}
	.message_left{
		display: flex;
	}
	.message_left image{
		width: 82upx;
		height: 82upx;
		overflow: hidden;
		border-radius: 50%;
		margin-right: 32upx;
	}
	.text2{
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		margin-right: 10upx;
	}
	.teacher_type{
		color: #46CECF;
		font-size: 18upx;
		border: 1upx solid #46CECF;
		padding: 1upx 2upx;
	}
	.grade_box{
		display: flex;
		align-items: center;
		height: 175upx;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		line-height: 60upx;
	}
	.text_box{
		width: 100%;
		background: #F5F5F5;
		padding: 24upx;
		box-sizing: border-box;
		border-radius: 10upx;
		font-size: 32upx;
	}
	.grade_num{
		font-size:50upx ;
		color: #FCC732;
		font-weight: bold;
		margin-left: 50upx;
	}
	.margin-box{
		margin-right: 30upx;
	}
	.btn{
		position: absolute;
		bottom: 50upx;
		border-radius: 44upx;
	}
</style>
